<div class="container password-reset clearfix">
  <div class="pull-left col-image">
    <img src={{lockImageUrl}} class="password-reset-img">
  </div>

  <div class="pull-left col-form">
    {{#if successMessage}}
      <p>{{successMessage}}</p>

      {{#if requiresApproval}}
        <p>{{i18n 'login.not_approved'}}</p>
      {{else}}
        {{#unless redirected}}
          <a class="btn" href="{{redirectHref}}" {{action "done"}}>{{continueButtonText}}</a>
        {{/unless}}
      {{/if}}
    {{else}}
      <form>

        <h2>{{i18n 'user.change_password.choose'}}</h2>

        <div class="input">
          {{password-field value=accountPassword type="password" id="new-account-password" capsLockOn=capsLockOn autofocus="autofocus"}}
          &nbsp;{{input-tip validation=passwordValidation}}
        </div>

        <div class="instructions">
          <div class="caps-lock-warning {{unless capsLockOn 'invisible'}}"><i class="fa fa-exclamation-triangle"></i> {{i18n 'login.caps_lock_warning'}}</div>
        </div>

        <button class='btn' {{action "submit"}}>{{i18n 'user.change_password.set_password'}}</button>

        {{#if errorMessage}}
          <br/><br/>
          <div class='alert alert-error'>{{errorMessage}}</div>
        {{/if}}

      </form>
    {{/if}}
  </div>
</div>
